<template>
    <div id="InvestManager">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>充值</el-breadcrumb-item>
        <el-breadcrumb-item>充值界面</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card>
        <el-descriptions class="margin-top" title="充值界面" :model="IsVipForm" direction="vertical" :column="3" size="small" border>
          <template slot="extra">
            <el-button type="primary" size="small" @click="invest()">充值</el-button>
          </template>
          <el-descriptions-item >
            <template slot="label" prop="workName" >
              <i class="el-icon-user"></i>
              顾客姓名
            </template>
            <span>{{IsVipForm.workName}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" prop="workIdCard">
              <i class="el-icon-s-finance"></i>
              身份证
            </template>
            <span>{{IsVipForm.workIdCard}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" prop="workTel">
              <i class="el-icon-phone-outline"></i>
              联系电话
            </template>
            <span>{{IsVipForm.workTel}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" prop="workTel">
              <i class="el-icon-s-custom"></i>
              用户角色
            </template>
            <span>{{IsVipForm.roleName}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" prop="isVip">
              <i class="el-icon-medal-1"></i>
              是否会员
            </template>
            <span>{{IsVipForm.isVip}}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label" prop="money">
              <i class="el-icon-bank-card"></i>
              剩余金额
            </template>
            <span>{{IsVipForm.money+'元'}}</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <div id="invest">
        <el-dialog
            title="充值界面"
            :visible.sync="dialogVisible"
            width="30%">
          <h4 style="margin-bottom: 15px">充值金额</h4>
          <el-radio-group v-model="amountVal"  @change="amountChange">
            <el-radio-button :label="'' + 50">50元</el-radio-button>
            <el-radio-button :label="'' + 100">100元</el-radio-button>
            <el-radio-button :label="'' + 200">200元</el-radio-button>
            <el-radio-button :label="'' + 500">500元</el-radio-button>
            <el-radio-button :label="''" @click="">自定义</el-radio-button>
          </el-radio-group>

          <h4 style="margin-bottom: 15px">充值金额</h4>
          <el-input
              :disabled="disabled"
              clearable
              v-model="rechargeParams.totalAmt"
              placeholder="请输入金额"
              style="width: 150px"
          ></el-input>

          <span slot="footer" class="dialog-footer">
         <div style="text-align: center; margin-top: 30px;">
            <el-button type="primary" @click="surePay" size="small">确认支付</el-button>
         </div>
          </span>
        </el-dialog>
      </div>

    </div>
</template>

<script>
export default {
  name: "InvestManager",
  data(){
    return{
      loading: true,
      isVip:"",
      IsVipForm:{
        workId:"",
        workName:"",
        workTel:"",
        workIdCard:"",
        roleName:"",
        isVip:"",
        money:"",
      },
      roleList:[],
      workIdList:[],
      dialogVisible: false,


      amountVal: "",
      disabled: false,
      //充值参数
      rechargeParams: {
        totalAmt: "", //金额
      },
      fullscreenLoading: false
    }
  },

  methods:{

    //查询所有角色信息
    getAllRole(){
      this.$axios.post("/role-info/getALLRole").then(res=>{
        console.log(res)
        this.roleList=res.data.data
      })
    },

    invest(){
      this.$alert('  一次性充值100元及以上或累计充值500元可成为本馆会员，可报名付费参加专属会员课程', '充值提示', {
      confirmButtonText: '确定',
      callback: action => {
        this.dialogVisible=true;
        }});
    },

    //充值金额
    amountChange(val) {
      this.rechargeParams.totalAmt = val;
      if (val == '') {
        this.disabled = false
      } else {
        this.disabled = true
      }
    },

    //确认支付
     surePay() {
      if (this.rechargeParams.totalAmt == '') {
        this.$message.warning('请输入金额');
        return;
      }
      var workId=JSON.parse(sessionStorage.getItem('user')).data.workId;
      var params = new URLSearchParams();
      params.append("totalAmt",this.rechargeParams.totalAmt)
      params.append("workId",workId.toString())
      this.$axios.post('/is-vip/invest',params).then(res=>{
        console.log(workId)
        console.log(this.rechargeParams.totalAmt)
        console.log(res)
        if (res.data.code ==200){
          this.openFullScreen2()
          this.$message.success("充值成功")
          location.reload();
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err=>{
        console.log(err)
      })
    },

    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
      }, 1000);
    }


  },

  created() {

    //查询所有角色信息
    this.getAllRole()

    //根据所选用户展示具体信息
    var workId=JSON.parse(sessionStorage.getItem('user')).data.workId
    console.log("workId:"+workId)
    this.$axios.post("/is-vip/getIsVipById","workId="+workId).then(res=>{
      var user=res.data.data
      this.IsVipForm={
        workId:user.workId,
        workName:user.workName,
        workTel:user.workTel,
        workIdCard:user.workIdCard,
        roleName:user.roleName,
        isVip:user.isVip,
        money:user.money,
      }
      if(this.IsVipForm.isVip==1){
        this.IsVipForm.isVip="非会员"
      }else{
        this.IsVipForm.isVip="会员"
      }
    });

  }
}
</script>

<style scoped>
.el-breadcrumb{
  margin-bottom: 20px;
}
.el-table{
  margin-top: 20px;
  margin-bottom: 20px;
}
.btn_opt{
  float:bottom;
  margin-left:19%;
}
</style>
